<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海洋可视化系统</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><!--视图约束-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4401444_0iroxi3zb5am.css">
    <link rel="stylesheet" href="../static/css/monitor.css">
    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
</head>
<body>
  <header>
      <section class="top">
      <section class="top_left"><img src="../static/img/sea.png" alt=""></section>
      <section class="top_center">
        <ul>
          <li>
            <a href="">更多信息<i class="icon-jiantouxia iconfont"></i></a>
            <div>
              <ul>
                <li>
                  <a href=""><img src="../static/images/.jpg" alt=""><span>全球</span></a>
                </li>
                <li>
                  <a href=""><img src="../static/images/.jpg" alt=""><span>温室效应</span></a>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="">介绍</a></li>
          <li><a href="">文章</a></li>
          <li><a href="https://www.supermapol.com/apps/mapdashboard/v2/index.html?id=1565366625">气象图</a></li>
          <li><a href="">天气预报</a></li>
          <li><a href="">帮助</a></li>
        </ul>
      </section>
      <section class="top_right">
        <ul>
          <li><a href="">注册</a></li>
          <li><a href="">登录</a></li>
          <li><a href="">退出</a></li>
        </ul>
      </section>
      <section class="pad icon-daohang iconfont">
        <div>
          <section>
            <ul>
              <li><a href="">更多信息</a></li>
              <li><a href="">天气预报</a></li>
              <li><a href="">帮助</a></li>
            </ul>
          </section>
        </div>
      </section>
    </section>
  </header>
  <content>
      <section class="content-left">
          <div class="content-left1" id="content-left1"></div>
          <div class="content-left2" id="content-left2"></div>
          <div class="content-left3" id="content-left3"></div>
      </section>
      <section class="content-center">
          <div class="content-center1" id="content-center1">
              <h2>海洋赤潮监测</h2>
              <h3>我国近期海洋赤潮爆发情况</h3>
              <div class="sea-rank">
                  <span>预期风险等级：</span>
                  <span>？风险</span>
              </div>
              <div class="sea-position">
                  <span>预期海域：</span>
                  <span>？？？</span>
              </div>
              <div class="sea-time">
                  <span>预期时间：</span>
                  <span>？？？？年？？月？？日</span>
              </div>
          </div>
          <div class="content-center2" id="content-center2"></div>
      </section>
      <section class="content-right">
          <div class="content-right1" id="content-right1"></div>
          <div class="content-right2" id="content-right2"></div>
          <div class="content-right3" id="content-right3"></div>
      </section>
  </content>


  <script src="../static/js/content-left1.js"></script>
  <script src="../static/js/content-left2.js"></script>
  <script src="../static/js/content-left3.js"></script>
  <script src="../static/js/content-center.js"></script>
  <script src="../static/js/content-right1.js"></script>
  <script src="../static/js/content-right2.js"></script>
  <script src="../static/js/content-right3.js"></script>
</body>
</html>